<template>
  <div class="root">
    <el-card shadow="never">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="auto"
      >
        <el-form-item label="店铺名称">
          <el-input
            v-model="formInline.storeName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="" class="newFormItem">
          <div class="btnBoxs">
            <div class="resetBtn" @click="chongzhi">
              <i class="el-icon-refresh-right"></i>
              重置
            </div>
            <div class="queryBtn" @click="selectAllByStoreName">
              <i class="el-icon-search"></i>
              搜索
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px">
      <div class="tableBox">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in tableData" :key="index"
            ><div class="grid-content bg-purple">
              <div class="listBox">
                <div class="headerBox">
                  <div
                    class="leftText"
                    @click="
                      $router.push({
                        path: '/highshop',
                        query: {
                          id: item.storeId,
                        },
                      })
                    "
                  >
                    {{ item.storeName }}
                    <div class="huangBtn" v-if="item.storeTimeFlag" >
                      {{ item.storeTimeFlag }}年店
                    </div>
                  </div>
                  <div class="rightBtn">
                    <div
                      class="hongBtn"
                      @click="deleteStoreCollection(item.id)"
                    >
                      取消收藏
                    </div>
                    <img
                      v-if="item.returnGoods"
                      src="../../../../static/Imgs/userImg/tui.png"
                      class="huanIcon"
                      alt=""
                    />
                    <img
                      v-if="item.exchangeGoods"
                      src="../../../../static/Imgs/userImg/huan.png"
                      class="huanIcon"
                      alt=""
                    />
                    <!-- <img
                      src="../../../../static/Imgs/userImg/bao.png"
                      class="huanIcon"
                      alt=""
                    />
                    <img
                      src="../../../../static/Imgs/userImg/shi.png"
                      class="huanIcon"
                      alt=""
                    /> -->
                  </div>
                </div>
                <el-divider></el-divider>
                <div class="contentBox">
                  <div class="dataBox">
                    <div class="dataList">
                      商家地址：{{ item.storeAddress }}
                    </div>
                    <div class="dataList">商家电话：{{ item.storePhone }}</div>
                    <div class="dataList">
                      <div class="newDataList">
                        联系方式：
                        <div class="lvBtn">
                          <img
                            src="../../../../static/Imgs/userImg/weixin.png"
                            alt=""
                            class="xiaoIcon"
                          />
                          微信交谈
                        </div>
                        <div class="lvBtn lanBtn">
                          <img
                            src="../../../../static/Imgs/userImg/phone.png"
                            alt=""
                            class="xiaoIcon"
                          />
                          电话联系
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dataBox newDataBox">
                    <div class="dataList">
                      商品数量：{{ item.storeProductNumber }}款
                    </div>
                    <div class="dataList">
                      年总销量：{{ item.storeTotalNumber }}件
                    </div>
                    <div class="dataList">
                      最近上新：{{ item.storeRecentlyUpdated }}
                    </div>
                  </div>
                </div>
                <div class="shopsImg">
                  <img
                    :class="index == 4 ? 'newImgB' : ' '"
                    v-for="(item1, index1) in item.storePicture"
                    :key="index1"
                    :src="item1"
                    class="newImg"
                    alt=""
                    @click="
                      $router.push({
                        path: '/detail',
                        query: {
                          id: item.idList[index1],
                        },
                      })
                    "
                  />
                </div>
              </div></div
          ></el-col>
        </el-row>
      </div>
      <div class="pagingBox">
        <PaginationView :total="total"></PaginationView>
      </div>
    </el-card>
  </div>
</template>
    
    <script>
import {
  selectAllByStoreName,
  deleteStoreCollection,
} from "@/api/MyCollection";
export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.selectAllByStoreName();
  },
  methods: {
    //取消店铺收藏
    deleteStoreCollection(id) {
      deleteStoreCollection({
        idList: `${id}`,
      }).then((data) => {
        this.$message({
          message: "取消成功",
          type: "success",
        });
        this.selectAllByStoreName();
      });
    },
    //重置
    chongzhi() {
      this.formInline = {
        pageNumber: 1,
        pageSize: 10,
        storeName: "",
      };
      this.selectAllByStoreName();
    },
    //获取店铺收藏列表
    selectAllByStoreName() {
      selectAllByStoreName(this.formInline).then((data) => {
        this.tableData = data.data.records;
        this.total = data.data.total;
        this.tableData.forEach((item) => {
          if (item.storePicture !== "") {
            item.storePicture = item.storePicture.split(",");
          } else {
            item.storePicture = [];
          }
        });
      });
    },
  },
};
</script>
    
    <style scoped lang="scss">
.root {
  font-size: 12px;
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  /deep/ .el-input__inner {
    border: none;
    background-color: #f5f7f9;
  }
  /deep/ .el-range-input {
    background-color: #f5f7f9;
  }
  /deep/ .el-form-item {
    background: #f5f7f9;
    padding: 0 10px;
    border-radius: 2px;
    margin-right: 40px;
    width: 23%;
  }
  /deep/ .newFormItem {
    background: #fff;
    width: 10%;
    margin-right: 0;
    .el-form-item__content {
      width: 100%;
    }
  }
  .btnBoxs {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .resetBtn {
      width: 5vw;
      border-radius: 2px;
      text-align: center;
      color: #666;
      font-size: 0.7vw;
      background-color: #f5f7f9;
    }
    .queryBtn {
      border-radius: 2px;
      text-align: center;
      width: 5vw;
      color: #fff;
      font-size: 0.7vw;
      background: #e22a1f;
      margin-left: 20px;
    }
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  /deep/ .el-input__suffix {
    right: -60px;
  }
  .tableBox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 6rem;
    /deep/ .el-row {
      width: 100%;
    }
    .listBox {
      background: #f5f7f9;
      margin-bottom: 20px;
      padding: 20px;
      height: 2.2rem;
      .headerBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .leftText {
          font-weight: 700;
          font-size: 0.18rem;
          display: flex;
          align-items: center;
          cursor: pointer;
          .huangBtn {
            background: #ffc766;
            border-radius: 20px;
            width: 0.6rem;
            height: 0.2rem;
            line-height: 0.2rem;
            font-size: 0.1rem;
            text-align: center;
            margin-left: 0.1rem;
          }
        }
        .rightBtn {
          display: flex;
          align-items: center;
          .hongBtn {
            color: #e22a1f;
            border-radius: 20px;
            width: 0.7rem;
            height: 0.2rem;
            line-height: 0.2rem;
            font-size: 0.1rem;
            text-align: center;
            margin-left: 0.1rem;
            border: 1px solid #e22a1f;
            cursor: pointer;
          }
          .huanIcon {
            width: 0.2rem;
            height: 0.2rem;
            margin-left: 0.1rem;
          }
        }
      }
      .contentBox {
        display: flex;
        justify-content: space-between;
        .dataBox {
          width: 55%;
          .dataList {
            font-size: 0.1rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-overflow: ellipsis;
            margin-bottom: 0.1rem;

            .newDataList {
              display: flex;
              align-items: center;
              .lvBtn {
                width: 0.8rem;
                height: 0.2rem;
                line-height: 0.2rem;
                background: #07c160;
                display: flex;
                align-items: center;
                border-radius: 2px;
                font-size: 0.08rem;
                color: #fff;
                margin-right: 0.1rem;
                .xiaoIcon {
                  height: 0.12rem;
                  width: 0.12rem;
                  margin: 0 5px;
                }
              }
              .lanBtn {
                background: #399ef1;
              }
            }
          }
        }
        .newDataBox {
          width: 40%;
          padding-left: 0.2rem;
          border-left: 1px solid #dcdfe6;
        }
      }
      .shopsImg {
        display: flex;
        margin-top: 10px;
        cursor: pointer;
        .newImg {
          width: 19%;
          height: 0.8rem;
          margin-right: 0.1rem;
        }
        .newImgB {
          margin-right: 0;
        }
      }
    }
  }
  .pagingBox {
    display: flex;
    justify-content: center;
  }
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .newBtn {
    width: 1.5rem !important;
  }
  .hongBtn {
    width: 1.2rem !important;
  }
  /deep/ .el-form-item__content {
    width: 57%;
  }
  .root {
    font-size: 12px;
    /deep/ .el-tabs__item.is-active {
      color: #e22a1f;
    }
    /deep/ .el-tabs__active-bar {
      background-color: #e22a1f;
    }
    /deep/ .el-tabs__item:hover {
      color: #e22a1f;
    }
    /deep/ .el-input__inner {
      border: none;
      background-color: #f5f7f9;
    }
    /deep/ .el-range-input {
      background-color: #f5f7f9;
    }
    /deep/ .el-form-item {
      background: #f5f7f9;
      padding: 0 10px;
      border-radius: 2px;
      margin-right: 40px;
      width: 19%;
    }
    /deep/ .newFormItem {
      background: #fff;
      width: 30%;
      margin-right: 0;
    }
    /deep/ .timeBox {
      width: 40%;
    }
    .btnBoxs {
      display: flex;
      justify-content: center;
      cursor: pointer;
      .resetBtn {
        width: 5vw;
        border-radius: 2px;
        text-align: center;
        color: #666;
        font-size: 0.7vw;
        background-color: #f5f7f9;
      }
      .queryBtn {
        border-radius: 2px;
        text-align: center;
        width: 5vw;
        color: #fff;
        font-size: 0.7vw;
        background: #e22a1f;
        margin-left: 20px;
      }
    }
    /deep/ .el-date-editor--daterange.el-input__inner {
      width: 250px;
    }
    /deep/ .el-input__suffix {
      right: -10px;
    }
    .tableBox {
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
      .lvBox {
        color: #07c160;
      }
      .hongBox {
        color: #e22a1f;
      }
    }
    .pagingBox {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
    